<template>
  <view class="transaction-item" @click="viewDetail">
    <view class="item-left">
      <view class="type-icon" :style="{backgroundColor: transaction.color}">
        <uni-icons :type="transaction.icon" size="18" color="#fff"></uni-icons>
      </view>
      <view class="item-info">
        <text class="type-name">{{ transaction.typeName }}</text>
        <text class="time">{{ formatTime(transaction.time) }}</text>
      </view>
    </view>
    <view class="item-right">
      <text 
        class="amount" 
        :class="{
          'income': transaction.type === 'recharge' || transaction.type === 'refund' || transaction.type === 'income',
          'outcome': transaction.type === 'payment' || transaction.type === 'withdraw'
        }"
      >
        {{ (transaction.type === 'recharge' || transaction.type === 'refund' || transaction.type === 'income') ? '+' : '-' }}{{ transaction.amount }}
      </text>
      <text 
        class="status" 
        :class="{
          'success': transaction.status === 'success',
          'processing': transaction.status === 'processing'
        }"
      >
        {{ transaction.status === 'success' ? '已完成' : '处理中' }}
      </text>
    </view>
  </view>
</template>

<script setup>
import { defineProps } from 'vue'
import { formatTime } from '@/utils/util.js'

const props = defineProps({
  transaction: {
    type: Object,
    required: true
  }
})

const viewDetail = () => {
  uni.navigateTo({
    url: `/pages/wallet/transaction-detail?id=${props.transaction.id}`
  })
}
</script>

<style lang="scss" scoped>
.transaction-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
  
  .item-left {
    display: flex;
    align-items: center;
    
    .type-icon {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;
    }
    
    .item-info {
      display: flex;
      flex-direction: column;
      
      .type-name {
        font-size: $font-size-28rpx;
        color: $text-color;
        margin-bottom: 8rpx;
      }
      
      .time {
        font-size: $font-size-24rpx;
        color: $text-color-666;
      }
    }
  }
  
  .item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    
    .amount {
      font-size: $font-size-30rpx;
      font-weight: bold;
      margin-bottom: 8rpx;
      
      &.income {
        color: #4CAF50;
      }
      
      &.outcome {
        color: #F44336;
      }
    }
    
    .status {
      font-size: $font-size-24rpx;
      
      &.success {
        color: $text-color-666;
      }
      
      &.processing {
        color: #FF9800;
      }
    }
  }
}
</style>